/*
 * @Author: yangzonglong
 * @Date: 2021-05-07 13:25:11
 * @version: v1.0.0
 * @Descripttion: 表单模板
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-08-11 10:02:05
 * @Auditor: 
 */
import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
import { PageHeader, Table, Search, Button, history, ActionText, units } from '@library';
import { TableRefProps } from '@library/components/table/interface';
import { FormProps } from '../../interface';
import { db } from '@library'

import QuerySession from '../../components/querySession/_QuerySession';
const QuerySessionIns = new QuerySession();

const t = window.$app.t;

const columns = [
  { dataIndex: 'formName', title: t('formName'), width: 300, tooltip: true, ellipsis: true },
  { dataIndex: 'formDesc', title: t('formDesc'), width: 300, tooltip: true, ellipsis: true },
  { dataIndex: 'action', title: t('action'), width: 80, tooltip: true, ellipsis: true, fixed: 'right' }
];

const toCrate = () => history.push('/myform/details');
const where = { categoryCode: undefined };

const FormPage = () => {
  const tableRef = useRef<TableRefProps>(null);
  const searchRef = useRef<any>(null);
  const [query, setQuery] = useState<String>('');
  const [dataSource, setDataSource] = useState<any>([])

  const columnsList = columns;
  console.log(columnsList)

  useEffect(() => {
    if (history._isFromBreadcrumb) {
      const queryObj = QuerySessionIns.getQuerySession();
      if (queryObj) {
        setQuery(queryObj || { where });
        searchRef.current?.setValue(queryObj.fuzzyValue);
      }
      history._isFromBreadcrumb = false;
    }
  }, []);

  const onRemove = useCallback(async (id) => {
    const result = await db.deleteForm(id);
    if (result) {
      units.message.success();
      setDataSource(dataSource.filter(item => item != id))
    }
  }, []);

  const onSearch = useCallback((fuzzyValue: string) => {
    setQuery(fuzzyValue)
  }, []);

  useEffect(() => {
    // query data
    db.getForms().then((list) => {
      console.log('forms', list)
      setDataSource(list)
    })
  }, [query])

  const extra = useMemo(() => [
    {
      dataIndex: 'action', render(text: string, record: FormProps) {
        return (
          <>
            <ActionText.Edit type='detail' onClick={() => {
              const query = tableRef.current?.getQuery!();
              QuerySessionIns.setQuerySession(query);
              history.push('/myform/details?id=' + record.id);
            }} />
            <ActionText.Delete onClick={() => onRemove(record.id!)} isModalTip />
          </>
        );
      }
    }
  ], [onRemove]);

  function onDoubleClick({ id }: { id: string; }) {
    const query = tableRef.current?.getQuery!();
    QuerySessionIns.setQuerySession(query);
    history.push('/myform/details?id=' + id);
  }

  return (
    <>
      <PageHeader />
      <div className='common-block-table'>
        <PageHeader extra={
          <>
            <Search onSearch={onSearch} placeholder={window.$app.t('searchFormListTip')} ref={searchRef} />
            <Button.Create onClick={toCrate} />
          </>
        } />
        <Table
          ref={tableRef}
          extra={extra}
          columns={columnsList}
          onDoubleClick={onDoubleClick}
          recordSort='FormList'
          dataSource={dataSource} />
      </div>
    </>
  );
};

export default FormPage